<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="treeName"
            placeholder="请输入部门名称"
            clearable
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container tree-container">
          <el-tree
            :data="treeOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
            :highlight-current="true"
            node-key="id"
            :default-expanded-keys="defaultExpandkeys"
            accordion
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <!-- 搜索  关键字：手机号+姓名 -->
        <el-form
          :model="queryParams"
          ref="queryForm"
          v-show="showSearch"
          :inline="true"
          label-width="80px"
        >
          <!-- <el-form-item label="部门" prop="deptId">
                <treeselect 
                    v-model="queryParams.deptId" 
                    :options="deptOptions" 
                    :show-count="true" 
                    placeholder="请选择部门" 
                    style="width: 240px"
                    size="small"
                />
            </el-form-item> -->
          <el-form-item label="工种" prop="workIds">
            <el-select
              v-model="queryParams.workIds"
              @change="handleQuery"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in workOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位" prop="postId">
            <el-select
              v-model="queryParams.postId"
              @change="handleQuery"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in postOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="queryParams.keywords"
              placeholder="请输入姓名/手机号"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              v-hasPermi="['11610']"
              @click="handleAdd"
              >添加人员</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              v-hasPermi="['11640']"
              :disabled="multiple"
              @click="handleDelete"
              >批量删除</el-button
            >
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              :disabled="multiple"
              @click="handlePostSet"
              >设置岗位</el-button
            >
          </el-col> -->
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              :disabled="multiple"
              @click="handleWorkSet"
              >设置工种</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              v-hasPermi="['11650']"
              @click="handleImport('批量导入')"
              >批量导入</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              v-hasPermi="['11660']"
              @click="handleExport"
              >批量导出</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport('导入证书')"
              >导入证书</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table
          v-loading="loading"
          :data="tableList"
          @selection-change="handleSelectionChange"
          :border="true"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="工号"
            prop="jobNumber"
            align="center"
            width="120"
          >
            <template slot-scope="scope">
              <div style="text-align: left">{{ scope.row.jobNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="avatar"
            label="个人照片"
            width="80"
          >
            <template slot-scope="scope">
              <imagePreview :src="scope.row.avatar" />
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="fullName" align="center">
            <template slot-scope="scope">
              <!-- class="active" -->
              <span @click="handleName(scope.row)">{{
                scope.row.fullName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="部门"
            prop="department"
            align="center"
            width="120"
          ></el-table-column>
          <el-table-column
            label="手机号"
            prop="phone"
            align="center"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="微信号"
            prop="wechat"
            align="center"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="身份证号"
            prop="idCard"
            align="center"
            :show-overflow-tooltip="true"
            width="150"
          />
          <el-table-column
            align="center"
            prop="headPortrait"
            label="头像"
            width="80"
          >
            <template slot-scope="scope">
              <imagePreview :src="scope.row.headPortrait" />
            </template>
          </el-table-column>
          <el-table-column
            label="员工类型"
            prop="employeeType"
            align="center"
            :show-overflow-tooltip="true"
            width="150"
          />
          <el-table-column
            label="工种"
            prop="workType"
            align="center"
            :show-overflow-tooltip="true"
            width="130"
          />
          <el-table-column
            label="岗位"
            prop="post"
            align="center"
            :show-overflow-tooltip="true"
            width="120"
          />
          <el-table-column
            label="个人邮箱"
            prop="email"
            align="center"
            :show-overflow-tooltip="true"
            width="130"
          />
          <!-- 入职时间、个人证书、账号状态（启用/禁用） -->
          <el-table-column
            label="入职时间"
            align="center"
            prop="entryTime"
            width="130"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.entryTime }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="个人证书" prop="certificateStatus" align="center">
            <template slot-scope="scope">
              <span @click="handleCert(scope.row)" class="active">{{
                scope.row.certificateStatus
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            label="个人证书"
            prop="certificateStatus"
            align="center"
          >
            <template slot-scope="scope">
              <span @click="handleCert(scope.row)" class="active">{{
                scope.row.certificateStatus
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="账号状态" align="center" key="enable">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enable"
                :active-value="1"
                :inactive-value="0"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-hasPermi="['11620']"
                @click="handleUpdate(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                v-hasPermi="['11630']"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
              <!-- <el-button
                size="mini"
                type="text"
                @click="handlePostSet(scope.row)"
                >岗位</el-button
              > -->
              <!-- <el-button
                      size="mini"
                      type="text"
                      @click="handleCert(scope.row)"
                  >设置证书</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.currentPage"
          :limit.sync="queryParams.pagesize"
          @pagination="getList"
        />

        <!-- 添加或修改角色配置对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          width="600px"
          append-to-body
        >
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            :validate-on-rule-change="false"
            label-width="90px"
          >
            <h3>基本信息</h3>
            <div>
              <!-- *工号、*姓名、*部门（树状）、*手机号、*身份证号、*工种（下拉，多选）、*岗位（下拉）、登录密码 -->
              <el-row>
                <el-col :span="12">
                  <el-form-item label="工号" prop="jobNumber">
                    <el-input
                      v-model="form.jobNumber"
                      placeholder="请输入工号"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="姓名" prop="fullName">
                    <el-input
                      v-model="form.fullName"
                      placeholder="请输入姓名"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="部门" prop="deptId">
                    <!-- :appendToBody="true" -->
                    <treeselect
                      v-model="form.deptId"
                      :options="treeOptions"
                      :show-count="true"
                      placeholder="请选择部门"
                      @select="selectDept"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证号" prop="idCard">
                    <el-input
                      v-model="form.idCard"
                      placeholder="请输入身份证号"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工种" prop="workId">
                    <el-select
                      v-model="form.workId"
                      multiple
                      placeholder="请选择"
                      @change="changeWork"
                    >
                      <el-option
                        v-for="item in workOptions"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="岗位" prop="postId">
                    <el-select
                      v-model="form.postId"
                      placeholder="请选择"
                      @change="changePost"
                    >
                      <el-option
                        v-for="item in postOptions"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="员工性别" prop="genderId">
                    <el-radio-group
                      v-model="form.genderId"
                      @change="changeGender"
                    >
                      <el-radio
                        v-for="item in genderOptions"
                        :key="item.id"
                        :value="item.id"
                        :label="item.id"
                        >{{ item.label }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="民族" prop="nationVal">
                    <el-select
                      v-model="form.nationVal"
                      placeholder="请选择"
                      @change="changeNavtion"
                    >
                      <el-option
                        v-for="item in nationOptions"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="登录密码"
                    prop="password"
                    style="margin-bottom: 0"
                  >
                    <el-input
                      v-model="form.password"
                      placeholder="请输入登录密码"
                      type="password"
                      maxlength="20"
                      show-password
                    />
                    <span class="warning">不修改密码时，请勿输入内容</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <h3 @click="changeMore">
              <span>更多信息</span>
              <i :class="iconClass"></i>
            </h3>
            <div v-show="isShow === true">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="职务" prop="job">
                    <el-select
                      v-model="form.job"
                      placeholder="请选择"
                      @change="changePosition"
                    >
                      <el-option
                        v-for="item in positionOptions"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="员工类型" prop="employeeType">
                    <el-select
                      v-model="form.employeeType"
                      placeholder="请选择"
                      @change="changeEmploy"
                    >
                      <el-option
                        v-for="item in employeeOptions"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" placeholder="请输入邮箱" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="微信号" prop="wechat">
                    <el-input v-model="form.wechat" placeholder="请输入邮箱" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="入职时间" prop="entryTime">
                    <el-date-picker
                      clearable
                      size="small"
                      v-model="form.entryTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择入职时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <!-- 默认空头像 -->
                  <el-form-item label="个人照片" prop="avatar">
                    <uploadImage :theType="1" v-model="form.avatar" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <!-- 默认空头像 -->
                  <el-form-item label="头像" prop="headPortrait">
                    <uploadImage :theType="1" v-model="form.headPortrait" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证正面" prop="idCardImg">
                    <uploadImage :theType="2" v-model="form.idCardImg1" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证反面" prop="idCardImg">
                    <uploadImage :theType="2" v-model="form.idCardImg2" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 批量岗位设置 -->
        <el-dialog
          title="设置岗位"
          :visible.sync="openPost"
          width="500px"
          append-to-body
        >
          <el-form
            ref="formPost"
            :model="formPost"
            :rules="rulesPost"
            :validate-on-rule-change="false"
            label-width="80px"
          >
            <el-form-item label="岗位" prop="postId">
              <el-select
                v-model="formPost.postId"
                placeholder="请选择"
                @change="changePost2"
              >
                <el-option
                  v-for="item in postOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitformPost">确 定</el-button>
            <el-button @click="cancelformPost">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 批量工种设置 -->
        <el-dialog
          title="设置工种"
          :visible.sync="openWork"
          width="500px"
          append-to-body
        >
          <el-form
            ref="formWork"
            :model="formWork"
            :rules="rulesWork"
            :validate-on-rule-change="false"
            label-width="80px"
          >
            <el-form-item label="工种" prop="workId">
              <el-select
                v-model="formWork.workId"
                multiple
                @change="changeWork2"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in workOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormWork">确 定</el-button>
            <el-button @click="cancelformWork">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 证书 -->
        <el-dialog
          title="个人证书"
          :visible.sync="open3"
          width="800px"
          append-to-body
        >
          <el-form
            ref="formCert"
            :model="formCert"
            :rules="rulesCert"
            :validate-on-rule-change="false"
            label-width="80px"
            :inline="true"
          >
            <el-form-item label="持证人" prop="fullName">
              <el-input v-model="formCert.fullName" disabled />
            </el-form-item>
            <el-form-item label="部门" prop="department">
              <el-input v-model="formCert.department" disabled />
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loading2"
            :data="tableList2"
            :border="true"
            max-height="600px"
          >
            <el-table-column
              label="证书编号"
              prop="certCode"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="证书名称"
              prop="certName"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="证书类别"
              prop="category"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="初审日期" align="center" prop="startTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.startTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="复审日期" align="center" prop="endTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.endTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="发证机关"
              prop="lssuingAuthority"
              align="center"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="有效状态"
              align="center"
              key="overdue"
            >
              <template slot-scope="scope">
                <span>{{ findOverdue(scope.row.overdue) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="certPic"
              label="证书图片"
              width="80"
            >
              <template slot-scope="scope">
                <imagePreview :src="scope.row.certPic" />
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>

        <!-- 用户导入对话框 -->
        <el-dialog
          :title="upload.title"
          :visible.sync="upload.open"
          width="400px"
          append-to-body
        >
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              <el-button
                type="warning"
                plain
                size="mini"
                @click="importTemplate"
                >下载模板</el-button
              >
            </div>
            <div class="el-upload__tip" style="color: red" slot="tip">
              提示：仅允许导入“xls”或“xlsx”格式文件！
            </div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import UploadImage from "@/components/ImageUpload";
import {
  getPage,
  listData,
  getStaffCom,
  getCertificate,
  addData,
  getData,
  updateData,
  changeWorkType,
  changePost,
  delData,
  delMultiData,
  EnableStaff,
} from "@/api/system/personAdmin";
import {
  booklistData,
  addCert,
  getCertData,
  updateCert,
  delCert,
} from "@/api/cert/cert";
import { getDict } from "@/api/select";
export default {
  name: "personAdmin",
  components: {
    Treeselect,
    UploadImage
  },
  data() {
    return {
      employeeOptions: [], // 员工类型
      treeName: undefined,
      treeOptions: [],
      nationOptions: [],
      currentId: null,
      defaultExpandkeys: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      avatars:
        "http://data.aqykt.cn/storage/images/1/20211214/5cfe76e18e188cad1088308bed097f75.png",
      isShow: false,
      iconClass: "el-icon-arrow-down",
      queryParams: {
        currentPage: 1,
        pagesize: 10,
        deptId: undefined,
        workIds: undefined,
        workType: undefined,
        post: undefined,
        keywords: undefined,
      },
      // 证书查询
      queryParamsbook: {
        currentPage: 1,
        pagesize: 10,
        personnelId: undefined,
        category: undefined,
      },
      showSearch: true,
      loading: true,
      tableList: [],
      ids: [],
      single: true,
      multiple: true,
      total: 0,
      title: "",
      open: false,
      form: {},
      rules: {
        jobNumber: [
          { required: true, message: "工号不能为空", trigger: "blur" },
        ],
        fullName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        deptId: [
          { required: true, message: "所属部门不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        idCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
        ],
        workId: [{ required: true, message: "工种不能为空", trigger: "blur" }],
        postId: [{ required: true, message: "岗位不能为空", trigger: "blur" }],
        nationVal: [
          { required: true, message: "民族不能为空", trigger: "blur" },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        genderId: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
        password: [
          {
            min: 2,
            max: 20,
            message: "登录密码长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
      },
      /** 批量岗位设置--------------- */
      openPost: false,
      formPost: {
        postId: undefined,
      },
      rulesPost: {
        postId: [{ required: true, message: "岗位不能为空", trigger: "blur" }],
      },
      /** 批量工种设置--------------- */
      openWork: false,
      formWork: {
        workId: [],
      },
      rulesWork: {
        getStaffCom: [
          { required: true, message: "请选择工种", trigger: "change" },
        ],
      },
      /** 个人证书--------------- */
      open3: false,
      loading2: false,
      tableList2: [],
      /** 添加证书--------------- */
      openCert: false,
      titleCert: "",
      formCert: {},
      rulesCert: {
        certName: [
          { required: true, message: "证书名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        categoryId: [
          { required: true, message: "请选择证书分类", trigger: "change" },
        ],
      },
      // 下拉框数据
      workOptions: [], //工种
      postOptions: [], //岗位
      certOptions: [], //证书
      positionOptions: [],
      genderOptions: [],
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        url: "",
      },
    };
  },
  watch: {
    // 根据名称筛选部门树
    treeName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getPageInfo();
    this.getStaffComlist();
    this.getCertOptions();
    // this.form.avatar = this.avatars;
    getDict(3, 0).then((response) => {
      // 1-  民族 3
      this.nationOptions = response.result.data;
    });
    getDict(35, 0).then((response) => {
      // 35-  员工类型 35
      this.employeeOptions = response.result.data;
    });
  },
  methods: {
    getPageInfo() {
      getPage(this.queryParams).then((response) => {
        this.treeOptions = response.result.data;
        this.currentId = response.result.data[0].id; //将节点id赋值给上级id
        this.$nextTick(() => {
          //默认当前选中（主要是为了样式）
          this.$refs.tree.setCurrentKey(this.currentId, true, false);
        });
        // this.defaultExpandkeys[0] = this.currentId;
        this.getList();
      });
    },
    getStaffComlist() {
      getStaffCom().then((response) => {
        this.workOptions = response.result.workType;
        this.postOptions = response.result.post;
        this.positionOptions = response.result.position;
        this.genderOptions = response.result.gender; //性别
      });
    },
    // 证书下拉框
    getCertOptions() {
      getCertificate().then((response) => {
        this.certOptions = response.result.certCategory;
      });
    },
    // 列表数据
    getList() {
      this.loading = true;
      if (this.queryParams.workIds) {
        this.queryParams.workType = this.queryParams.workIds.join(",");
      }
      this.queryParams.deptId = this.currentId;
      listData(this.queryParams).then((response) => {
        this.tableList = response.result.rows;
        this.total = response.result.total;
        this.loading = false;
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.currentId = data.id; //id
      // this.defaultExpandkeys[0] = this.currentId;   //下一次获取树，默认展开的节点
      this.getList();
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      /* queryParams: {
        currentPage: 1,
        pagesize: 10,
        deptId: undefined,
        workIds: [],
        post: undefined,
        keywords: undefined,
      } */
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    handleUpdate(row) {
      console.log("修改-----", row);
      this.reset();
      const theId = row.theid || this.ids;
      getData(theId).then((response) => {
        this.form = response.result;
        this.form.employeeTypeVal = response.result.employeeType;

        if (this.employeeOptions.length > 0) {
          // this.employeeOptions && this.employeeOptions.forEach(item =>
          // if(item.label == response.result.employeeType) {
          //     this.form.employeeType = item})
          this.form.employeeType = response.result.employeeType
            ? this.employeeOptions.find(
                (ele) => ele.label === response.result.employeeType
              ).id
            : "";
        }
        let arr = response.result.workType.split(",");
        this.form.workId = arr.map((item) => {
          return Number(item);
        });
        //为 this.form.workIds this.form.workVal 赋初始值
        this.changeWork(this.form.workId);
        this.form.postId = response.result.post;
        //为 this.form.postVal 赋初始值
        this.changePost(this.form.postId);
        this.form = { ...this.form };
        this.open = true;
        this.title = "修改";
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.theid != undefined) {
            updateData(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            if (this.form.password == "") this.msgError("登录密码不能为空");
            addData(this.form).then((response) => {
              this.msgSuccess("添加成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        password: undefined, //登录密码
        genderId: undefined, //性别 id 1-男 2-女
        jobNumber: undefined, //工号
        fullName: undefined, //姓名
        deptId: undefined, //所属部门 id
        phone: undefined, //手机号
        idCard: undefined, //身份证号
        workId: [],
        postId: undefined, //岗位 id
        nationVal: undefined, //民族 id
        job: undefined, //职务 id
        wechat: undefined, //微信号
        employeeType: undefined, //员工类型 id
        employeeTypeVal: undefined, //员工类型的文字值
        email: undefined, //邮箱
        address: undefined, //家庭住址
        avatar: this.avatars, //个人照片
        headPortrait: this.avatars, //头像照片
        idCardImg: undefined, //身份证图片
        idCardImg1: undefined, //身份证图片 正面
        idCardImg2: undefined, //身份证图片 反面
      };
      this.resetForm("form");
    },
    // 批量岗位设置
    handlePostSet(row) {
      this.resetFormPost();
      // const theId = row.theid || this.ids;
      this.formPost.theid = row.theid || this.ids.join(",");
      this.openPost = true;
    },
    submitformPost() {
      this.$refs["formPost"].validate((valid) => {
        if (valid) {
          changePost(this.formPost).then((response) => {
            this.msgSuccess("修改成功");
            this.openPost = false;
            // this.getPageInfo();
            this.getList();
          });
        }
      });
    },
    cancelformPost() {
      this.openPost = false;
      this.resetFormPost();
    },
    resetFormPost() {
      this.formPost.postId = undefined;
      this.resetForm("formPost");
    },
    // 批量工种设置
    handleWorkSet() {
      this.resetFormWork();
      this.formWork.theid = this.ids.join(",");
      this.openWork = true;
    },
    submitFormWork() {
      this.$refs["formWork"].validate((valid) => {
        if (valid) {
          changeWorkType(this.formWork).then((response) => {
            this.msgSuccess("修改成功");
            this.openWork = false;
            // this.getPageInfo();
            this.getList();
          });
        }
      });
    },
    cancelformWork() {
      this.openWork = false;
      this.resetFormWork();
    },
    resetFormWork() {
      // this.$set(this.student,"age", 24)
      this.formWork.workId = [];
      this.resetForm("formWork");
    },
    handleDelete(row) {
      const theId = row.theid || this.ids;
      let idListStr = this.ids.join(",");
      if (row.theid) {
        //删除
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            // 调接口
            return delData(theId);
          })
          .then(() => {
            this.getPageInfo();
            this.getList();
            this.msgSuccess("删除成功");
          });
      } else {
        //批量删除
        this.$confirm("是否确认删除?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            // 调接口
            return delMultiData(idListStr);
          })
          .then(() => {
            this.getPageInfo();
            this.getList();
            this.msgSuccess("删除成功");
          });
      }
    },
    handleStatusChange(row) {
      let text = row.enable === "0" ? "启用" : "停用";
      this.$confirm('是否确认' + text + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口 改变状态值
          return EnableStaff(row.theid, row.enable);
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.enable = row.enable === "0" ? "1" : "0";
        });
    },
    // 点击姓名  - 查看个人信息  ----体检表
    handleName(row) {},
    // 点击证书  - 查看证书
    handleCert(row) {
      this.formCert.fullName = row.fullName;
      this.formCert.department = row.department;
      this.open3 = true;
      this.queryParamsbook.personnelId = row.theid;
      this.getListCert();
    },
    getListCert() {
      this.loading2 = true;
      booklistData(this.queryParamsbook).then((response) => {
        this.tableList2 = response.result.rows;
        this.total = response.result.total;
        this.loading2 = false;
      });
    },
    // 添加证书
    handleAdd3(row) {
      this.resetCert();
      this.openCert = true;
      this.title = "添加证书";
    },
    // 修改证书
    handleUpdate3(row) {
      this.resetCert();
      const theId = row.theid;
      getCertData(theId).then((response) => {
        console.log("证书单条信息---", response);
        this.formCert = true;
        this.title = "修改";
      });
    },
    // 提交证书
    submitFormCert() {
      this.$refs["formCert"].validate((valid) => {
        if (valid) {
          if (this.form.theid != undefined) {
            updateCert(this.formCert).then((response) => {
              this.msgSuccess("修改成功");
              this.open3 = false;
              this.getListCert();
            });
          } else {
            addCert(this.formCert).then((response) => {
              this.msgSuccess("添加成功");
              this.open3 = false;
              this.getListCert();
            });
          }
        }
      });
    },
    // 取消按钮
    cancelCert() {
      this.openCert = false;
      this.resetCert();
    },
    resetCert() {
      this.resetForm("formCert");
    },
    handleCertChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$confirm('是否确认' + text + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.msgSuccess(text + "成功");
      });
    },
    // 切换 隐藏/显示 更多信息
    changeMore() {
      if (this.isShow === false) {
        this.isShow = true;
        this.iconClass = "el-icon-arrow-up";
      } else {
        this.isShow = false;
        this.iconClass = "el-icon-arrow-down";
      }
    },
    // 获取当前选中部门的名称
    selectDept(val) {
      this.form.deptVal = val.label;
    },
    /** 导入 */
    handleImport(val) {
      if (val == "批量导入") {
        this.upload.title = "批量导入";
        this.upload.open = true;
      } else if (val == "导入证书") {
        this.upload.title = "导入证书";
        this.upload.open = true;
      }
    },
    /** 下载模板操作 */
    importTemplate() {
      /* importTemplate().then(response => {
        this.download(response.msg);
      }); */
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 导出 */
    handleExport() {
      // const queryParams = this.queryParams;
      this.$confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // 调接口导出表
          // return exportRole(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    // 获取当前选中工种的名称
    changeWork(val) {
      if (val.length <= 0) return;
      let workIdsArr = [],
        workValArr = [];
      for (let i = 0; i <= val.length - 1; i++) {
        this.workOptions.find((item) => {
          if (item.id == val[i]) {
            workIdsArr.push(item.id);
            workValArr.push(item.label);
          }
        });
      }
      this.form.workIds = workIdsArr.join(",");
      this.form.workVal = workValArr.join(",");
    },
    changeWork2(val) {
      if (val.length <= 0) return;
      let workIdsArr = [],
        workValArr = [];
      for (let i = 0; i <= val.length - 1; i++) {
        this.workOptions.find((item) => {
          if (item.id == val[i]) {
            workIdsArr.push(item.id);
            workValArr.push(item.label);
          }
        });
      }
      this.formWork.workIds = workIdsArr.join(",");
      this.formWork.workVal = workValArr.join(",");
    },
    // 获取当前选中岗位的名称
    changePost(val) {
      if (this.postOptions.length > 0) {
        this.form.postVal = val
          ? this.postOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    // 获取当前选中民族
    changeNavtion(val) {
      if (this.nationOptions.length > 0) {
        this.form.nation = val
          ? this.nationOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    changePost2(val) {
      if (this.postOptions.length > 0) {
        this.formPost.postVal = val
          ? this.postOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    changePosition(val) {
      if (this.positionOptions.length > 0) {
        this.form.jobVal = val
          ? this.positionOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    // 员工类型
    changeEmploy(val) {
      if (this.employeeOptions.length > 0) {
        this.form.employeeTypeVal = val
          ? this.employeeOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    changeGender(val) {
      if (this.genderOptions.length > 0) {
        this.form.genderVal = val
          ? this.genderOptions.find((ele) => ele.id === val).label
          : "";
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.theid);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    findOverdue(val) {
      //有效状态 0-未过期 1-已过期（证书状态）
      if (val === 0) return "未过期";
      else if (val === 1) return "已过期";
    },
  },
};
</script>

<style scoped lang="scss">
/* treeselect */
.vue-treeselect__input {
  display: block;
}
/deep/ .vue-treeselect__control {
  height: 32px;
  line-height: 32px;
  margin-top: 3px;
}
.el-form /deep/ h3 {
  background: #f1e9c8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  line-height: 34px;
  padding: 0 16px;
  margin-bottom: 10px;
  cursor: pointer;
}
/* .el-date-editor*/
/deep/ .el-dialog__body .el-date-editor.el-input,
/deep/ .el-dialog__body .el-date-editor.el-input__inner {
  // width: 220px;
  width: auto !important;
}
.el-table .active {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.warning {
  color: red;
  font-size: 12px;
}


</style>